<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<h1>你好，世界！</h1>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <p>
            <label>notice content?</label>
        </p>
        <p>
            <textarea id="name" rows="5"></textarea>
        </p>
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>
<pre>
作者：Devid
链接：http://www.jianshu.com/p/8500ad65eb50
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
</pre>
<script src="../static/sockjs.min.js"></script>
<script src="../static/stomp.js"></script>
<script src="../static/jquery.min.js"></script>
<script>
    var stompClient = null;
    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        document.getElementById('response').innerHTML = '';
    }
    // 开启socket连接
    function connect() {
        var socket = new SockJS('/webSocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            setConnected(true);
        });
    }
    // 断开socket连接
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }
    // 向‘/app/publish-notice’服务端发送消息
    function sendName() {
        var value = document.getElementById('name').value;
        stompClient.send("/server/publish-notice", {}, value);
    }
    connect();
</script>
<pre>
作者：Devid
链接：http://www.jianshu.com/p/8500ad65eb50
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
</pre>

<h1>接收公告的页面</h1>
<div>
    <p class="msg"></p>
</div>
<p>
<button class="test">aaaaaaa</button>
</p>
<script>
    var noticeSocket = function () {
        var s = new SockJS('/webSocket');
        var stompClient = Stomp.over(s);
        stompClient.connect({}, function () {
            console.log('notice socket connected!');
            stompClient.subscribe('/client/notice', function (data) {
                $('.msg').html(data.body);
            });
        });
    };
    noticeSocket();
</script>
<!--<iframe src="http://localhost:8080" width="100%" height="400px"></iframe>-->
<script>
    $(".test").click(function () {
//        $.get("http://localhost:8080/data",{},function (data) {
//            alert(data);
//        },"jsonp")
        $.ajax({
            url:'http://localhost:8080/data',
            dataType:"jsonp",
            jsonp:"callback",
            callback:"success_jsonp",
            timeout:3000,
            dataFilter:function(json){
                console.log("jsonp.filter:"+json);
                return json;
            },
            success:function(data){
                console.log("jsonp.success:"+data.msg);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                console.log("jsonp.error:"+textStatus);
            }
        });
    });


</script>
</body>
</html>